<template>
	<view class="exchange-dividend">
		<view class="card-box">
			<view class="top-box">
				<view class="label">换分红</view>
				<input class="input" type="number" v-model="form.number" placeholder="请输入数量" />
			</view>
			<view class="bottom-box">
				<view class="number">可用贡献值（0）</view>
				<view class="tips">确认后输入</view>
			</view>
		</view>
		
		<view class="button-box">
			<button class="btn" :disabled="btnDisabled">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					number: '',
				}
			}
		},
		methods: {
			
		},
		computed: {
			btnDisabled () {
				return !(this.form.number)
			}
		}
	}
</script>

<style lang="scss">
.exchange-dividend {
	box-sizing: border-box;
	padding: 24rpx;
	min-height: 100%;
	background-color: $bg-color;
	.card-box {
		padding: 0 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.top-box {
			padding: 40rpx 0 26rpx;
			border-bottom: 1rpx solid #eee;
			.label {
				color: #333;
				font-size: 26rpx;
			}
			.input {
				margin-top: 32rpx;
				width: 100%;
				font-size: 40rpx;
				font-weight: bold;
			}
			.input-placeholder {
				color: #999;
			}
		}
		.bottom-box {
			height: 102rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.number {
				color: #333;
			}
			.tips {
				color: #999;
			}
		}
	}
	.button-box {
		margin-top: 180rpx;
		.btn {
			height: 86rpx;
			border-radius: 86rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #5749f7;
			&[disabled] {
				color: #d6d6d6;
				background-color: #999999;
			}
		}
	}
}
</style>
